<template name="publish">
    <div style="{{#if isOnMobile}}max-width:95%;margin:auto;padding-left: 2px;padding-right:2px;text-align: center;{{else}}max-width:1080px;margin:auto;padding-left: 25px;padding-right:25px;text-align: center;{{/if}}">
        <div id="infozone">
            <h1>Publish video to blockchain</h1>
            
            <div class="ui centered stackable grid">
                <div class="nine wide column">
                    <p>
                        {{#if hasThumbnail}}
                            Your video is ready to be published. <strong>Publishing a video on a blockchain is an irreversible process</strong>. You will never be able to completely delete your video. However, you will always be able to hide it from d.tube UI by setting the visibility option to Unlisted.
                        {{else}}
                            Your video is almost ready! You need to <strong>Add Thumbnail</strong>.
                            This image will be used to display your video in d.tube listings: search results, rankings, and channel pages.
                            Recommended size for your thumbnail is 640x360 (16:9)
                        {{/if}}

                        <br /><br />You can add more video mirrors by clicking on <strong>Add Video</strong>. This is a good option if you are afraid of your video getting deleted on 3rd party providers.
                        
                        {{#if hasDecentralizedVideo}}
                            <br /><br />Optionally, you can add subtitles (VTT format) to your video with the <strong>Add Subtitle</strong> button.
                        {{/if}}
                    </p>
                </div>
                <div class="seven wide column">
                    <!-- video preview -->
                    {{> player tmpVideo}}
                </div>
                <div class="nine wide column">
                    <form class="ui form uploadform">
                        <div class="field publishfield">
                            <label>{{ translate 'UPLOAD_TITLE'}}</label>
                            <input id="uploadTitle" type="text" name="title" placeholder="{{ translate 'UPLOAD_TITLE'}}" value="{{json.title}}">
                        </div>
                        <div class="field publishfield">
                            <label>{{ translate 'UPLOAD_DESCRIPTION'}}</label>
                            <textarea id="uploadDescription" rows="4" name='description'>{{json.description}}</textarea>
                        </div>
                        {{#unless isEditingVideo}}
                        <div class="two fields">
                            <div class="field publishfield">
                                <label>{{ translate 'UPLOAD_TAGS'}}</label>
                                <select id="tagDropdown" name="skills" class="ui fluid search dropdown">
                                    <option value=""></option>
                                    {{#each topTags}}
                                    <option value="{{tag}}">{{tag}}</option>
                                    {{/each}}
                                </select>
                            </div>

                            <div class="field">
                                <div class="field publishfield">
                                    <label>{{ translate 'UPLOAD_DURATION'}}</label>
                                    <input id="inputDuration" type="text" name="duration" placeholder="{{ translate 'UPLOAD_DURATION'}}" value="{{json.duration}}">
                                </div>
                            </div>
                        </div>
                        {{/unless}}
                    </form>
                </div>
                
                <div class="seven wide column">
                    <form class="ui form uploadform">
                        <div class="field publishfield">
                            <label>{{ translate 'UPLOAD_VISIBILITY'}} {{> badgenew}}</label>
                            <select id="visibilityDropdown" name="visibility" class="ui fluid search dropdown">
                                <option value="0">{{ translate 'UPLOAD_VISIBILITY_PUBLIC'}}</option>
                                <option value="1">{{ translate 'UPLOAD_VISIBILITY_UNLISTED'}}</option>
                            </select>
                        </div>
                        <div class="two fields">
                            <div class="field">
                                <div class="ui checkbox publishfield">
                                    <input id='inputNsfw' type="checkbox" name="nsfw">
                                    <label>NSFW {{>badgehelp 'NSFW'}}</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox publishfield">
                                    <input id='inputOC' type="checkbox" name="nsfw">
                                    <label>Original Content</label>
                                </div>
                            </div>
                        </div>
                        
                        {{#if activeUsername}}
                            {{#unless isEditingVideo}}
                            <div class="field">
                                <div class="content">
                                    <div class="header" style='text-align: right'>
                                    Burning <strong style='color:#f01a30'>{{displayMoney publishBurn 0 'DTC'}}</strong> for promotion
                                    </div>
                                    <div class="ui red range" id="burn-range"></div>
                                </div>
                            </div>
                            {{/unless}}
                        {{/if}}
                    </form>

                    <br /><br />
                    
                    {{#if isEditingVideo}}
                        <div id="editVideo" class="ui right floated labeled button" style='margin-bottom: 10px;' tabindex="0">
                            <button name="button" class="ui red right labeled dtube icon button">
                                <i class="podcast icon red" style="background:white;opacity:1;"></i>
                                <i class="icon white loading spinner dsp-non" style="background-color: transparent;opacity:1;"></i>                                
                                <div style="display:inline-block;padding: 0.8em 1em;">Confirm</div>
                            </button>
                        </div>
                    {{else}}
                        <div id="publishVideo" class="ui right floated labeled button" style='margin-bottom: 10px;' tabindex="0">
                            <button name="button" class="ui red right labeled dtube icon button">
                                <i class="podcast icon red" style="background:white;opacity:1;"></i>
                                <i class="icon white loading spinner dsp-non" style="background-color: transparent;opacity:1;"></i>
                                <div style="display:inline-block;padding: 0.8em 1em;">Publish Video</div>
                            </button>
                        </div>
    
                        <div id="trashVideo" class="ui right floated labeled button" tabindex="0">
                            <button name="button" class="ui blue right labeled dtube icon button">
                                <i class="trash icon blue" style="background:white;opacity:1;"></i>
                                <div style="display:inline-block;padding: 0.8em 1em;">Trash</div>
                            </button>
                        </div>
                    {{/if}}
                </div>
            </div>
            
            <div class="ui divider"></div>
            <h2>Files</h2>
            <div class="ui three column stackable grid"><div class="row">
                {{#unless hasThumbnail}}
                    <div class="column">
                        <label for="snapFile">
                            <a class="ui red dtube icon right labeled button needsclick" id="uploadSnap" style='margin-bottom: 10px;'>
                                <div style="display:inline-block; padding:0.8em 1em;" class="needsclick">
                                Add Thumbnail
                                </div>
                                <i class="file image icon red" style="background:white; opacity:1;"></i>
                            </a>
                        </label>
                        <input type="file" id="snapFile" style="display: none;">
                    </div>
                    
                {{/unless}}
                <div class="column">
                    <div id="addVideo" class="ui labeled button" tabindex="0" style='margin-bottom: 10px;'>
                        <button name="button" class="ui blue right labeled dtube icon button">
                            <i class="video icon blue" style="background:white;opacity:1;"></i>
                            <div style="display:inline-block;padding: 0.8em 1em;">Add Video</div>
                        </button>
                    </div>
                </div>

                <!-- <div id="addSprite" class="ui labeled small button" tabindex="0">
                    <button name="button" class="ui blue right labeled dtube icon button">
                        <i class="film icon blue" style="background:white;opacity:1;"></i>
                        <div style="display:inline-block;padding: 0.8em 1em;">Add Sprite</div>
                    </button>
                </div> -->

                {{#if hasDecentralizedVideo}}
                    <div class="column">
                        <div id="addSubtitle" class="ui labeled button" tabindex="0">
                            <button name="button" class="ui blue right labeled dtube icon button">
                                <i class="file alternate icon blue" style="background:white;opacity:1;"></i>
                                <div style="display:inline-block;padding: 0.8em 1em;">Add Subtitle</div>
                            </button>
                        </div>
                    </div>
                {{/if}}
            </div></div>
            
            <table class="ui celled table">
                <thead>
                    <th>Type</th>
                    <th>Tech</th>
                    <th>Hash / Id</th>
                    <th>Gateway</th>
                    <th></th>
                </thead>
                <tbody>
                    {{#each files}}
                        <tr>
                            <td>{{prettyType type ver}}</td>
                            <td>{{tech}}</td>
                            <td>{{hash}}</td>
                            <td>{{#if gw}}{{gw}}{{else}}Default{{/if}}</td>
                            <td>
                                {{#if isDecentralized tech}}
                                    <i style="cursor: pointer" class="preview-file external square icon"></i>
                                    <i style="cursor: pointer" class="edit-file edit icon"></i>
                                {{/if}}
                                <i style="cursor: pointer" class="trash-file trash icon"></i>
                            </td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>

            {{#if activeUsernameSteem}}
                {{#unless isEditingVideo}}
                <div class="ui divider"></div>
                <h2>Steem Options</h2>
                <form class="ui form uploadformadvanced">
                    <div class="field advancedupload">
                        <div class="field publishfield">
                            <label>{{ translate 'UPLOAD_BODY_STEEM'}}</label>
                            <textarea id='inputSteemMarkdown' rows="10" name='body'>{{body}}</textarea>
                        </div>
                        <input type="hidden" name="permlink" value="">
                        <div class="inline field" style="text-align:right;" id="powerup">
                            <div class="ui checkbox publishfield">
                                <input id='inputSteemPowerup' type="checkbox" name="powerup">
                                <label>{{ translate 'UPLOAD_POWER_UP'}}</label>
                            </div>
                            <label></label>
                        </div>
                    </div>
                </form>
                {{/unless}}
            {{/if}}
        </div>
    </div>
</template>